<%@	page import ="java.util.ArrayList" %>
<%@	page import ="java.util.Iterator" %>
<%@	page import ="java.util.List" %>
<%@	page import ="com.adisi.objetos.Cliente" %>
<%@	page import ="com.adisi.objetos.Viaje" %>
<%@	page import ="com.adisi.objetos.Chofer" %>
<%@	page import ="com.adisi.objetos.Auto" %>
<%@	page import ="com.adisi.objetos.PuntoRuta" %>
<%@	page import ="java.util.Date" %>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<jsp:directive.include file="headerComun.jsp" />
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.ui.map.js"></script>	

	<div class="container">
		<jsp:directive.include file="menuNavegacion.jsp" />
		<% 
		
			Viaje viaje = (Viaje)request.getAttribute("viaje");
		
			ArrayList<PuntoRuta> puntos = viaje.getPuntos();
			
			PuntoRuta punto = new PuntoRuta(-34.551478f,-58.5003995f,new Date(), "" );
			
			if(puntos.size()>0)
				punto = puntos.get(puntos.size()-1);
		
			String msg = (String)request.getAttribute("msg");
			String msgType = (String)request.getAttribute("msg_type");
			
			if(msgType==null) msgType = "default";
			 
		%>
		<script type="text/javascript">
		$(document).ready(function(){
			<% if(msg!=null) { %>
			$('#alert_placeholder').append('<div class="alert alert-<%=msgType %> fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><%=msg%></div>');
			<% } %>
			

			
			$('#map_canvas').gmap({ 'center': '<%=punto.getLatitud() %>,<%=punto.getLongitud() %>' });
			//{ 'center': '<%=punto.getLatitud() %>,<%=punto.getLongitud() %>' }
			<% int i=0;
				for(PuntoRuta pto : puntos) {
					i++;
			%>
				$('#map_canvas').gmap('addMarker', { title:'Pto. <%=i%>', 'position': '<%=pto.getLatitud() %>,<%=pto.getLongitud() %>',  'bounds': true } );
			<% }%>
	
		});	
	    </script>
	
		<div class="row">
			<div class="col-md-4">
				<h3>Recorrido </h3>			
			</div>
		</div>		
		<div class="row">
			<div class="col-md-6">
				<strong>Chofer:</strong> <%= viaje.getJornada().getChofer().getNombreCompleto() %>			
			</div>
			<div class="col-md-6">
				<strong>Desde:</strong> <%= viaje.getOrigen().toString(true) %>					
			</div>
		</div>		
		<div class="row">
			<div class="col-md-6">
				<strong>Auto:</strong> <%= viaje.getJornada().getAuto().getDescripcion() %>	
			</div>
			<div class="col-md-6">
				<strong>Hasta:</strong> <%= viaje.getDestino().toString(true) %>			
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12">
				<div id="map_canvas" class="map rounded" style="height:400px; :position: relative; overflow: hidden; -webkit-transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
			</div>		
		</div>		
</div>
</body>
</html>